<template>

  <div class="app-container" style="width: 99%;">
		<div style="margin-bottom: 20px">
			<el-button @click="dialogFormVisible = true">添加新频道</el-button>
			<el-button @click="clearFilter">占位不知道干啥</el-button>
		</div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
			style="width: 99.9%;"
			:row-style="{height:'30px'}"
			:cell-style="{padding:'0px'}"
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tool-tip="true" label="频道名称" 
			 :filters="getfilter"
			 :filter-method="filterHandler"
			 >
        <template slot-scope="scope">
          {{ scope.row.chatTitle }}
        </template>
      </el-table-column>
      <el-table-column label="频道地址" width="310" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.author }}https://t.me/FuckCJMarketing</span>
        </template>
      </el-table-column>
      <el-table-column label="频道人数" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.pageviews }}23
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="是否监听"  width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">已监听</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="最新消息" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>2017-03-27</span>
        </template>
      </el-table-column>
    </el-table>
	<div style="margin-bottom: 10%; margin-top: 2%;">
			 <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=1
            :page-sizes="[10, 50, 100, 200]"
            :page-size=10
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
						/>
        </el-pagination>
	</div>
	
	<el-dialog title="添加频道" :visible.sync="dialogFormVisible">
	  <el-form :model="form">
	    <el-form-item label="频道地址" :label-width="formLabelWidth">
	      <el-input v-model="form.name" autocomplete="off"></el-input>
	    </el-form-item>
	    <el-form-item label="是否监听" :label-width="formLabelWidth">
	      <el-select v-model="form.region" placeholder="请选择是否监听">
	        <el-option label="区域一" value="shanghai"></el-option>
	        <el-option label="区域二" value="beijing"></el-option>
	      </el-select>
	    </el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="dialogFormVisible = false">取 消</el-button>
	    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
	  </div>
	</el-dialog>
  </div>
	

</template>

<script>
import { getList } from '@/api/table'
// import demo from '@/views/table/dialogForm.vue'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },

  data() {
    return {
			total: 5,
      list: null,
      listLoading: true,
	  dialogFormVisible: false,
	          form: {
	            name: '',
	            region: '',
	            date1: '',
	            date2: '',
	            delivery: false,
	            type: [],
	            resource: '',
	            desc: ''
	          },
		formLabelWidth:'120px',
		
    }
  },
  created() {
    this.fetchData(1,10)
  },
  methods: {
    fetchData(currentPage,pageSize) {
      this.listLoading = true
			console.info(currentPage)
			var data={"currentPage":currentPage,"pageSize":pageSize}
      getList(data).then(response => {
        this.list = response.data
        this.listLoading = false
				this.total = 225;
        this.currentPage = 1;
				this.pageSize= 6;
      })
    },
		resetDateFilter(){
			
		},
		clearFilter(){
		},
		handleSizeChange(val){
			this.pageSize = val;
			this.currentPage = 1;
			this.fetchData(1, val);
			console.log(`每页 ${val} 条`);
    },
		handleCurrentChange(val){
			this.currentPage = val;
			this.fetchData(val, this.pageSize);
			console.log(`当前页: ${val}`);
    },
		filterHandler(val){
			console.info(val)
		},
		chatNameFilter(){
			this.getfilter= [{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]
		}
  }
}
</script>
